<template>
  <div>
    <div class="_detail_main_body">
      <div class="_detail_main_head">
        <div class="_detail_head_fist_icon">
          <van-icon name="arrow-left" size="25" @click="router.go(-1)" />
        </div>
        <div class="_detail_head_text">课程详情</div>
        <div class="_detail_head_second_icon">
          <van-icon :name="detailInfo.is_collect==0?'star-o':'star'" size="25" @click="AddColllect"  />
          <!-- <van-icon name="star" size="25" v-show="detailInfo.is_collect===1" @click="AddColllect"/> -->
          <van-icon name="miniprogram-o" size="25" @click="OpenTcode" />
        </div>
      </div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="item in Bannerlist"
          :key="item.id"
          class="_swipe_item"
        >
          <img :src="item.banner_src" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="_detail_course_item">
        <h4>{{ detailInfo.title }}</h4>
        <div class="_detail_course_info">
          <div>共{{ detailInfo.course_count }}个课时</div>
          <div>{{ detailInfo.course_classify_title }}</div>
        </div>
        <div class="detail_course_num_person">
          已报名{{ detailInfo.sales_num }}人
        </div>
        <div class="detail_course_teacher">
          <div
            class="detail_course_teacher_item"
            v-for="item in detailInfo.teacher"
            :key="item.teacher_id"
          >
            <img :src="item.avatar" alt="" />
            <div>{{ item.teacher_name }}</div>
          </div>
        </div>
      </div>

      <div class="_course_way_doing">
        <div>课前准备</div>
        <div class="_course_way_mobile">
          <div>{{ detailInfo.teacher_wechat_guided_words }}</div>
          <div class="_course_way_online">联系方式</div>
        </div>
      </div>
      <van-tabs>
        <van-tab title="课程详情">
          <div v-html="Content"></div>
        </van-tab>
        <van-tab title="课程安排">
          <div>
            <van-collapse v-model="activeName" accordion>
              <van-collapse-item
                v-for="item in CoursePeriods"
                :key="item.course_id"
                :title="item.course_title"
                :name="item.course_id"
              >
                <van-collapse-item
                  v-for="val in item.list"
                  :key="val.id"
                  :title="val.title"
                  :name="val.id"
                >
                  <van-collapse-item
                    v-for="it in val.chlid"
                    :key="it.id"
                    :title="it.periods_title"
                    name="it.id"
                  >
                    技术无非就是那些开发它的人的共同灵魂。
                  </van-collapse-item>
                </van-collapse-item>
              </van-collapse-item>
            </van-collapse>
          </div>
        </van-tab>
        <van-tab title="资料下载">内容 3</van-tab>
        <van-tab title="课程评价">内容 4</van-tab>
      </van-tabs>

      <div class="_detail_footer">
        <div class="_detail_btn_free">免费</div>
        <div class="_detail_btn_robot">
          <van-icon name="service-o" size="25" />
          <div>客服</div>
        </div>
        <div class="_detail_btn_submit">免费领取</div>
      </div>
    </div>
    <van-popup v-model:show="showStatus"   closeable :style="{ width: '40%',height:'25%', }" class="block_box"><img :src="imgURL" alt=""></van-popup>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import QRcode from "qrcode";

import { GetCourseDetailapi, PostCollectapi } from "../http/api";
const route = useRoute();
const router = useRouter();
const id = route.query.id;
const Bannerlist = ref([]);
const detailInfo = ref({});
const Content = ref("");
const CoursePeriods = ref([]);
const activeName = ref("1");
const flag=ref(false)
const showStatus=ref(false)
const imgURL=ref('')
const OpenTcode=()=>{
   //获取当前课程的url
   const url = location.href
  QRcode.toDataURL(url, (err, res) => {
    if (err) return false;
    console.log("二维码：", res);
    imgURL.value = res;
  });
    showStatus.value=true
}
const getdetail = () => {
  GetCourseDetailapi(id).then((res) => {
    console.log("详情数据", res);
    Bannerlist.value = res.data.data.banner;
    detailInfo.value = res.data.data.info;
    Content.value = res.data.data.info.course_details.replace(
      /\<img/gi,
      '<img style="max-width:100%;height:auto"'
    );
    console.log("详细信息", detailInfo.value);
    CoursePeriods.value = res.data.data.course_periods;
  });
};
const AddColllect=()=>{
  PostCollectapi({basis_id:id,type:1}).then(res=>{
    console.log(res);
    detailInfo.value.is_collect=res.data.data.is_collect
    console.log(detailInfo);
  })
  flag.value=!flag.value
}
onMounted(() => {
  getdetail();
});

console.log(id);
</script>
<style scoped>
._detail_main_body {
  width: 100%;
  height: 100%;
  padding-bottom: 100px;
  box-sizing: border-box;
}
._detail_main_head {
  width: 100%;
  height: 90px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
._detail_head_second_icon {
  width: 15%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.block_box{
  width: 200px;
  height: 200px;
}
._detail_footer {
  width: 100%;
  height: 100px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
._detail_btn_free {
  width: 35%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  justify-content: space-between;
  color: green;
  border-right: 1px solid #ccc;
}
._detail_btn_robot {
  width: 15%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: #ccc;
  align-items: center;
}
._detail_btn_submit {
  width: 50%;
  height: 100px;
  line-height: 100px;
  color: white;
  background-color: #f15a24;
  text-align: center;
}
.swipe {
  width: 100%;
  height: 440px;
}
.swipe ._swipe_item {
  width: 100%;
  height: 100%;
}
._swipe_item img {
  width: 100%;
  height: 100%;
}
._detail_course_item {
  width: 100%;
  height: 320px;
  background-color: white;
  padding: 15px;
  box-sizing: border-box;
}
._detail_course_info {
  width: 100%;
  height: 50px;
  display: flex;
}
._detail_course_info div {
  margin-right: 60px;
  font-size: 26px;
  color: #ccc;
}
.detail_course_num_person {
  width: 100%;
  height: 50px;
  font-size: 26px;
  color: #ccc;
}
.detail_course_teacher_item {
  width: 30%;
  display: flex;
}
.detail_course_teacher_item img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.detail_course_teacher {
  width: 100%;
  display: flex;
}
.detail_course_teacher_item div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 26px;
  margin-right: 30px;
}
._course_way_doing {
  width: 100%;
  height: 200px;
  background-color: white;
  margin-top: 30px;
  padding: 20px;
  font-size: 28px;
  box-sizing: border-box;
  margin-bottom: 30px;
}
._course_way_mobile {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 80px;
  margin-top: 40px;
}
._course_way_online {
  width: 180px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 25px;
  color: white;
  background-color: #f15a24;
}
</style>
